<template>
    <!-- 导航栏 -->
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="back" />
    <!-- 购物车列表 -->
    <div class="list">
        <!-- 复选框 -->
        <van-checkbox-group v-model="checked">
            <div class="product" v-for="(item,index) in cartlist">
                <!-- 复选框 item.id购物车-->
                <van-checkbox :name="item.id" class="item"></van-checkbox>

                <!-- 购物车商品 滑动单元格 删除-->
                <van-swipe-cell>
                    <!-- 商品卡片 -->
                    <van-card :price="item.total" :desc="'单价：￥'+item.price" :title="item.productname"
                        :thumb="item.product.cover_cdn">
                        <!-- 利用插槽，重新部分结构 利用插槽就要用双标签了 #表示id tags 指定的位置名词-->
                        <!-- tag图片角标  左上角 -->
                        <template #tags>
                            <p>库存：{{item.product.stock}}</p>
                        </template>
                        <!-- 右下角 -->
                        <template #footer>
                            <!-- 步进器 -->
                            <van-stepper v-model="item.nums" :name="item.id" disable-input @change="CartStep" />
                        </template>
                    </van-card>

                    <!-- 滑动单元格 -->
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" @click="CartDel(item.id)" />
                    </template>
                </van-swipe-cell>
            </div>
        </van-checkbox-group>
    </div>

    <!-- 底部 提交表单 -->
    <van-submit-bar :price="total" button-text="提交订单" @submit="SubmitOrder">
        <van-checkbox v-model="all" @click="Switch">全选</van-checkbox>
    </van-submit-bar>


</template>
<script>
    export default {
        name: 'CartIndex',

        created() {

            this.CartData()


        },
        data() {
            return {

                LoginUser: this.$cookies.get("LoginUser"),
                cartlist: [], ///购物车商品
                checked: [], ////复选框，可以选择多个，那就说明可以有多个不一样的id
                all: false,
            }
        },

        // total数量的逻辑
        computed: {
            total() {
                // 当复选框没有选中时 价格自然为0
                if (this.checked.length <= 0) {
                    return 0
                }

                //循环购物车所有，判断，在不在选中的数组里面 如果有选中，就去获取选中商品的总价

                var total = 0;
                // console.log(this.cartlist);


                for (var item of this.cartlist) {
                    // 判断当前商品的id 在不在checked里面
                    if (this.checked.includes(item.id)) {
                        // 拿到每个商品的价格，相加
                        total += parseFloat(item.total)
                    }
                }

                // 转换单位
                total = parseFloat(total) * 100 //以分为单位
                return total //把数据返出去
            }
        },
        methods: {
            back() {
                this.$router.go(-1)
            },
            // 全选
            Switch() {
                // 判断是否为选中状态
                if (this.all) {
                    // 如果选中，循环列表， 选中的放新数组里面
                    var ids = []
                    // value 相当于item ，数组中的每一个
                    this.cartlist.map((value) => {
                        ids.push(value.id)
                    })

                    //  赋值给原本数组
                    this.checked = ids
                } else {
                    // 如果没有选中，选中数组为空
                    this.checked = []
                }

            },

            // 删除
            async CartDel(cartid) {
                // console.log(cartid);传了个购物车商品id

                // 提醒
                this.$dialog.confirm({
                    'title': "删除购物车",
                    "message": '是否确认删除商品',
                }).then(async () => {
                    //调接口
                    //组装数据  确定，就组装数据，去数据库删除
                    var data = {
                        userid: this.LoginUser.id,
                        cartid
                    }

                    var result = await this.$api.CartDel(data);

                    if (result.code == 0) {
                        this.$notify({
                            message: result.msg,
                            duration: 1000,

                        })
                        return false
                    }
                    // 初始化购物车后再，重新调用接口
                    this.cartlist = []

                    //重新更新一下购物车的记录
                    this.CartData()

                }).catch(() => {})
            },


            // 步进器发生改变时 detail购物车id
            async CartStep(value, detail) {
                // 组装数据
                var data = {
                    cartid: detail.name,
                    nums: value,
                    userid: this.LoginUser.id
                }

                //这里是修改数据，调用的自然是修改接口 
                var result = await this.$api.CartEdit(data);
                console.log(result);

                // d调用失败
                if (result.code == 0) {
                    this.$notify({
                        message: result.msg,
                        duration: 1000,
                    })
                    return false
                }
                // 成功 ，就把页面数据更新（重新请求接口）
                this.CartData()
            },

            // 查询商品列表
            async CartData() {
                // 组装数据
                var data = {
                    userid: this.LoginUser.id
                }

                var result = await this.$api.CartIndex(data);
                this.cartlist = result.data
                // console.log(result);
                // console.log(this.cartlist);

            },

            // 提交订单
            SubmitOrder() {

                // 要有选中才能跳转
                if (this.checked.length > 0) {
                    this.$router.push({
                        path: '/product/cart/confirm',
                        query: {
                            // 选中谁就把谁传过去this.checked必须以字符串传过去
                            cartids: this.checked.join(',')
                        }
                    })
                } else {
                    // 如果没有选就提醒
                    this.$notify({
                        message: '请选择下单商品',
                        duration: 1000,
                    })
                }
            }
        },

    }
</script>


<style>
    .list {
        height: 84.5vh;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .van-swipe-cell {
        width: 100%;
       
    }

    .product {
        position: relative;

    }

    .product .van-card {
        padding-left: 3em;
    }

    .product .van-card__footer {
        position: absolute;
        right: 1em;
        bottom: 1em;
    }


    .item {
        position: absolute;
        z-index: 1;
        top: 42%;
        left: 1%;
    }

    .delete-button {
        height: 100% !important;
    }
</style>